<template>
  <el-row style="min-height: 7.5rem">
    <el-col :span="10" style="border: 1px solid #E1E1E1;border-radius: 5px">
        <div>
            <div style="border-radius: 5px 5px 0px 0px;
                                                                border-bottom: 1px solid #42A4ED;display: flex;
                                                                justify-content: space-around;background: #42A4ED">
                <div id="rec" style="
                             font-weight: bolder;
                                                                     cursor: pointer;/*鼠标变成手指样式*/
                                                                     transition: all 0.3s;
                                                                     color: #fff;">
                    <p style="padding: 10px 10px;height: 40px;">待选择</p>
                </div>
            </div>
            <div style="padding-bottom: 20px;margin: auto;
                                                                min-height: 15%;width:80%;font-size: .2rem;
                                                                color:#0c1a24;background-color: #fff;">
                <el-row>
                    <el-col :span="20" style="margin-left: 40px; margin-top: 10px;">
                        <el-input :style="{ margin: 'auto', height: '30px'}" v-model.trim="formData.orgName"
                            v-show="flag == 'REC'" placeholder="请输入组织名称">
                            <!-- <template #append>
                                <img @click="getUserData()" src="@/assets/images/icon/search.png"
                                    style="position:relative;top:0px;right: 0px;cursor: pointer">
                            </template> -->
                        </el-input>
                    </el-col>
                </el-row>
            </div>
            <el-table v-loading="flagTbale" ref="selectedLeft"  align='center' :row-style="{ height: '30px', padding: '0 0' }"
                highlight-current-row :data="tableData" @selection-change="handleLeftSelectionChange"
                :cell-style="{ padding: '3px', background: '#fff', paddingLeft: '0', color: '#666' }"
                :header-cell-style="{ background: '#42A4ED', color: '#FFFFFF', height: '20px', fontSize: '0.2rem', fontWeight: 'bold' }"
                :header-row-style="{ padding: '10px' }">
                <el-table-column type="selection" width="50" prop="select"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" align="center" v-for="col in cols" :key="col.id"
                    :label="col.label" :prop="col.prop" :width="col.width">
                </el-table-column>
            </el-table>
            <div style="height: 1rem;margin-bottom:0.2rem;display: flex; justify-content: center;">
                <el-pagination class="pagination"  small layout="prev, pager, next" @size-change="handleSizeChange"
                    :pager-count="3" @current-change="handleCurrentChange" v-model:current-page="pageNum"
                    v-model:page-size="pageSize" :total="total"  />
            </div>
        </div>
    </el-col>
    <!-- 中间按钮 -->
    <!--中间按钮开始-->
    <el-col :span="2" class="layui-transfer-active" style="margin: 230px 3% 0 5%;">
        <div>
            <el-button class="setting-btn" style="width: 70%;" @click="buttonRight" type="primary"
                :disabled="fxDisabled">
                派单
            </el-button>
        </div>
        <div>
            <el-button class="setting-btn mt20" style="width: 70%;" @click="buttonLeft" type="primary"
                :disabled="qxfxDisabled">取消
            </el-button>
        </div>
    </el-col>
    <el-col :span="10" style="border: 1px solid #E1E1E1;border-radius: 5px">
        <div>
            <div style="border-radius: 5px 5px 0px 0px;
                                                        border-bottom: 0px solid #42A4ED;display: flex;
                                                        justify-content: space-around;background: #42A4ED">
                <div id="reced" style="font-family: SourceHanSansCN-Medium;
                                                             font-weight: bolder;
                                                             cursor: pointer;/*鼠标变成手指样式*/
                                                             transition: all 0.3s;
                                                             color: #fff;">
                    <p style="padding: 10px 10px;height: 40px;">已选择</p>
                </div>
            </div>
            
            <!-- 右侧搜索框 -->
            <div style="padding-bottom: 20px;margin: auto;
                                                                min-height: 15%;width:80%;font-size: .2rem;
                                                                color:#0c1a24;background-color: #fff;">
                <el-row>
                    <el-col :span="20" style="margin-left: 40px; margin-top: 10px;">
                        <el-input :style="{ margin: 'auto', height: '30px'}" v-model.trim="rightSearchText"
                            placeholder="请输入搜索内容" @input="handleRightSearch">
                            <template #append>
                                <el-icon @click="handleRightSearch"><Search /></el-icon>
                            </template>
                        </el-input>
                    </el-col>
                </el-row>
            </div>
            
            <!-- 右侧样式选择器 -->
            <div style="padding-bottom: 10px;margin: auto;
                                                                width:80%;font-size: .2rem;">
                <el-select v-model="rightStyleType" placeholder="选择右侧样式" @change="applyRightStyle">
                    <el-option label="默认样式" value="default" />
                    <el-option label="高亮样式" value="highlight" />
                    <el-option label="简洁样式" value="simple" />
                </el-select>
            </div>
            
            <el-table ref="selectedRight"  align='center' max-height="470px" :row-style="{ height: '30px', padding: '0 0' }"
                highlight-current-row :data="filteredSharedData" @selection-change="handleRightSelectionChange"
                :cell-style="rightCellStyle"
                :header-cell-style="rightHeaderCellStyle"
                :header-row-style="{ padding: '10px' }"
                >
                <el-table-column type="selection" width="55" prop="select"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" align="center" v-for="col in cols" :key="col.id"
                    :label="col.label" :prop="col.prop" :width="col.width">
                </el-table-column>
            </el-table>
        </div>
    </el-col>
</el-row>
</template>
<script setup>
import { ref, computed } from 'vue'
import { Search } from '@element-plus/icons-vue'

const tableData = ref([]) //左侧数据
const selectedLeft = ref([])// 左侧选中数据
const sharedData = ref([])//右侧数据
const selectedRight = ref([])// 右侧选中数据
const formData = ref({ orgName: '' })
const flag = ref('REC')
const flagTbale = ref(false) //可以去除所有的flagTbale 变量即可去除loading功能
const pageNum = ref(1)
const pageSize = ref(10)
const total = ref(0)
const rightSearchText = ref('')
const rightStyleType = ref('default')

//表格表头
const cols = ref([
    { id: 1, prop: 'latnName', label: '本地网' },
    { id: 2, prop: 'orgId', label: '组织编码' },
    { id: 3, prop: 'orgName', label: '组织' },
])

// 初始化模拟数据
const initData = () => {
    // 模拟10条数据
    const mockData = [
        { latnName: '北京', orgId: '001', orgName: '北京分公司' },
        { latnName: '上海', orgId: '002', orgName: '上海分公司' },
        { latnName: '广州', orgId: '003', orgName: '广州分公司' },
        { latnName: '深圳', orgId: '004', orgName: '深圳分公司' },
        { latnName: '杭州', orgId: '005', orgName: '杭州分公司' },
        { latnName: '成都', orgId: '006', orgName: '成都分公司' },
        { latnName: '武汉', orgId: '007', orgName: '武汉分公司' },
        { latnName: '西安', orgId: '008', orgName: '西安分公司' },
        { latnName: '南京', orgId: '009', orgName: '南京分公司' },
        { latnName: '重庆', orgId: '010', orgName: '重庆分公司' }
    ]
    tableData.value = mockData
    total.value = mockData.length
}

// 初始化数据
initData()

// 右侧搜索过滤后的数据
const filteredSharedData = computed(() => {
    if (!rightSearchText.value) {
        return sharedData.value
    }
    const searchText = rightSearchText.value.toLowerCase()
    return sharedData.value.filter(item => 
        item.latnName.toLowerCase().includes(searchText) ||
        item.orgId.toLowerCase().includes(searchText) ||
        item.orgName.toLowerCase().includes(searchText)
    )
})

// 右侧单元格样式 - 根据选择的样式类型动态改变
const rightCellStyle = computed(() => {
    switch (rightStyleType.value) {
        case 'highlight':
            return { 
                padding: '3px', 
                background: '#f0f9ff', 
                paddingLeft: '0', 
                color: '#333',
                fontWeight: 'bold'
            }
        case 'simple':
            return { 
                padding: '2px', 
                background: '#fff', 
                paddingLeft: '0', 
                color: '#666',
                fontSize: '0.18rem'
            }
        default:
            return { 
                padding: '3px', 
                background: '#fff', 
                paddingLeft: '0', 
                color: '#666' 
            }
    }
})

// 右侧表头样式 - 根据选择的样式类型动态改变
const rightHeaderCellStyle = computed(() => {
    switch (rightStyleType.value) {
        case 'highlight':
            return { 
                background: '#1890ff', 
                color: '#FFFFFF', 
                height: '25px', 
                fontSize: '0.2rem', 
                fontWeight: 'bold'
            }
        case 'simple':
            return { 
                background: '#f5f5f5', 
                color: '#666', 
                height: '20px', 
                fontSize: '0.18rem', 
                fontWeight: 'normal'
            }
        default:
            return { 
                background: '#42A4ED', 
                color: '#FFFFFF', 
                height: '20px', 
                fontSize: '0.2rem', 
                fontWeight: 'bold'
            }
    }
})

// 取消按钮
const buttonLeft = async () => {
    if (!selectedRight.value || !Array.isArray(selectedRight.value)) {
        selectedRight.value = [];
    }
    // 将右侧选中的数据移动到左侧
    tableData.value = tableData.value.concat(selectedRight.value);
    // 从右侧数据中移除已经移动的数据
    sharedData.value = sharedData.value.filter(item => !selectedRight.value.includes(item));
    // 清空右侧选中的数据
    selectedRight.value = [];
}

// 分享按钮
const buttonRight = async () => {
    if (!selectedLeft.value || !Array.isArray(selectedLeft.value)) {
        selectedLeft.value = [];
    }
    // 将左侧选中的数据移动到右侧
    sharedData.value = sharedData.value.concat(selectedLeft.value);
    // 从左侧数据中移除已经移动的数据
    tableData.value = tableData.value.filter(item => !selectedLeft.value.includes(item));
    // 清空左侧选中的数据
    selectedLeft.value = [];
}

// 按钮是否禁用
const qxfxDisabled = ref(true)
const fxDisabled = ref(true)

// 左侧表格选中事件
const handleLeftSelectionChange = (selection) => {
    fxDisabled.value = selection.length === 0;
};

// 右侧表格选中事件
const handleRightSelectionChange = (selection) => {
    selectedRight.value = selection;
    qxfxDisabled.value = selection.length === 0;
};

// 左侧搜索功能
const getUserData = () => {
    // 这里可以根据实际需求实现搜索逻辑
    // 这里仅做示例，实际项目中应该调用API获取数据
    if (!formData.value.orgName) {
        initData()
        return
    }
    
    const searchText = formData.value.orgName.toLowerCase()
    const filtered = tableData.value.filter(item => 
        item.orgName.toLowerCase().includes(searchText)
    )
    tableData.value = filtered
    total.value = filtered.length
}

// 右侧搜索功能
const handleRightSearch = () => {
    // 搜索逻辑已经在computed属性中处理
    console.log('右侧搜索:', rightSearchText.value)
}

// 应用右侧样式
const applyRightStyle = () => {
    console.log('应用右侧样式:', rightStyleType.value)
}

// 分页处理
const handleSizeChange = (size) => {
    pageSize.value = size
}

const handleCurrentChange = (current) => {
    pageNum.value = current
}
</script>
<style scoped>
.mt20 {
    margin-top: 20px;
}
</style>